import React from "react";
const ThemeContext = React.createContext("dark");
class App extends React.Component {
  render() {
    return (
      // 生产消费者模型
      // 写信 生产
      // 读信 消费
      // 写一次信 读无数次
      // <ThemeContext.Provider value="light">
      <>
        <Toolbar />
        <SideBar />
      </>

      // </ThemeContext.Provider>
    );
  }
}
function Toolbar() {
  return (
    <div>
      <ThemedButton theme="xxx" />
    </div>
  );
}
class SideBar extends React.Component {
  static contextType = ThemeContext;

  render() {
    return <div>{this.context}</div>;
  }
}
class ThemedButton extends React.Component {
  // static contextType = ThemeContext;
  render() {
    // props 复用性强 组件嵌套深了，传值不方便
    return <button theme={this.props.theme}>{this.context}</button>;
  }
}
ThemedButton.contextType = ThemeContext;
export default App;
